<template>
	<view id="logistics">
		<!-- 商品详情 -->
		<view class="shop-message">
			<view class="shop-message-top">
				<text>商品详情</text>
				<text>订单号：{{message.order_num}}</text>
			</view>
			<view class="shop-message-content">
				<view class="shop-message-content-left">
					<image :src="`https://nabercat.oss-cn-hangzhou.aliyuncs.com/${message.goods_img}`" mode=""></image>
				</view>
				<view class="shop-message-content-right">
					<view class="shop-name">{{message.goods_name}}</view>
					<view class="shop-num">数量：×{{message.goods_num}}</view>
					<view class="shop-bottom">
						<view class="shop-price">¥<text>{{message.goods_price}}</text></view>
						<view class="shop-all-num">共<text>{{message.goods_pieces}}</text>件商品</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 物流信息 -->
		<view class="logistics-message">
			<view class="logistics-list">
				<view class="logistics-item">
					<text>承运人：</text>
					<text>{{message.delivery_name}}</text>
				</view>
				<view class="logistics-item">
					<text>运单号：</text>
					<text>{{message.waybill_id}}</text>
				</view>
			</view>
			<!-- 物流流程 -->
			<view class="flow-path">
				<view class="harvest">
					<icon class="harvest-icon" :class="{'harvest-icon-active' : message.finish==1}"></icon>
					<view class="harvest-content">收货地址：{{message.pro+message.city+message.area+message.address}}</view>
				</view>
				<view class="delivery" v-for="(item,index) in message.path_item_list" :key="index" :class="{'delivery-active' : index==0}">
					<icon class="delivery-icon" :class="{'delivery-icon-active':index==0}"></icon>
					<view class="delivery-content">{{item.context}}</view>
					<view class="delivery-time">{{item.time}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {expressPath} from '@/api/index.js'
	import {formatTimeSecond} from '@/util/time.js'
	export default {
		data() {
			return {
				message:{},
				order_id:"", //9
			}
		},
		methods: {
			// 初始化物流信息
			expressPath:function(){
				expressPath({
					order_id:this.order_id
				}).then(res=>{
					res.path_item_list.forEach(obj=>{
						obj.action_time=formatTimeSecond(obj.action_time)
					})
					this.message=res
					console.log(res)
				})
			}
		},
		onLoad(options) {
			this.order_id=options.order_id;
			this.expressPath();
		},
	}
</script>

<style lang="scss" scoped>
	@mixin flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	#logistics {
		background: #F5F5F5;
		height: 100%;
	}

	.shop-message {
		margin-top: 20rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 36rpx 32rpx;

		.shop-message-top {
			padding-bottom: 32rpx;
			border-bottom: 2rpx solid #EFEFEF;
			color: #999999;
			font-size: 24rpx;
			@include flex();

			&>text:nth-of-type(1) {
				font-size: 32rpx;
				color: #333333;
				font-weight: 700;
			}
		}

		.shop-message-content {
			@include flex();
			align-items: stretch;
			padding-top: 28rpx;

			.shop-message-content-left {
				width: 188rpx;
				height: 188rpx;
				margin-right: 32rpx;

				&>image {
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
				}
			}

			.shop-message-content-right {
				flex: 1;
				padding: 6rpx 0;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.shop-name {
					color: #333333;
					font-size: 32rpx;
					font-weight: 600;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.shop-num {
					color: #666666;
					font-size: 24rpx;
					margin: 8rpx 0;
				}

				.shop-bottom {
					@include flex();
					align-items: flex-end;

					.shop-price {
						font-size: 28rpx;
						color: #F6240C;

						&>text {
							font-size: 42rpx;
						}
					}

					.shop-all-num {
						color: #999999;
						font-size: 24rpx;

						&>text {
							color: #666666;
							font-size: 32rpx;
						}
					}
				}
			}
		}
	}

	.logistics-message {
		background: #FFFFFF;
		border-radius: 0px 0px 16rpx 16rpx;
		margin-top: 20rpx;

		.logistics-list {
			padding: 36rpx 32rpx;
			border-bottom: 2rpx solid #EFEFEF;

			.logistics-item {
				margin-bottom: 24rpx;
				color: #333333;
				font-size: 26rpx;

				&:nth-last-child(1) {
					margin: 0;
				}

				&>text:nth-of-type(2) {
					font-weight: 700;
				}
			}
		}

		.flow-path {
			padding: 58rpx 62rpx;
			font-size: 26rpx;

			icon {
				display: block;
				position: absolute;
				width: 52rpx;
				height: 52rpx;
				top: -26rpx;
				left: -26rpx;
			}

			.harvest {
				padding: 10rpx 0 58rpx 62rpx;
				border-left: 2rpx dashed #D9D9D9;
				color: #666666;
				position: relative;

				.harvest-icon {
					background: url(../../static/images/logistics/shouhuo-h.png) no-repeat;
					background-size: cover;
				}

				.harvest-icon-active {
					background: url(../../static/images/logistics/shouhuo-now.png) no-repeat;
					background-size: cover;
				}
			}

			.delivery {
				padding: 4rpx 0 58rpx 58rpx;
				border-left: 2rpx solid #D9D9D9;
				color: #999999;
				position: relative;

				.delivery-icon {
					background: url(../../static/images/logistics/yunshu-h.png) no-repeat;
					background-size: cover;
				}

				.delivery-icon-active {
					background: url(../../static/images/logistics/yunshu-now.png) no-repeat;
					background-size: cover;
				}

				.delivery-time {
					font-size: 22rpx;
					margin-top: 8rpx;
				}

				&:nth-last-child(1) {
					border: none;
				}
			}

			.delivery-active {
				color: #333333;
			}
		}
	}
</style>
